<template>
  <view class="container">
    <!-- 背景效果 - 重写气泡动画 -->
    <view class="background-effects">
      <view class="background-overlay"></view>
      <view v-for="(bubble, index) in bubbles" :key="index" class="bubble" :class="`bubble-${index % 3}`" :style="{
          left: bubble.x + '%',
          top: bubble.y + '%',
          width: bubble.size + 'rpx',
          height: bubble.size + 'rpx',
          animationDelay: bubble.delay + 's'
        }"></view>
    </view>

    <!-- 主内容区 -->
    <view class="content-wrapper">
      <!-- 顶部导航区 -->
      <view class="top-navigation">
        <!-- 返回按钮 -->
        <view class="floating-close-btn" @click="goBack">
          <text class="close-icon">✕</text>
        </view>
        <!-- 奶量显示 - 放在标题位置 -->
        <view class="milk-amount-header">
          <text class="milk-amount-main">{{ selectedAmount }}</text>
          <text class="milk-amount-unit">ml</text>
        </view>
        <view class="placeholder"></view>
      </view>

      <!-- 主体内容区域 -->
      <view class="main-content-area">
        <!-- 奶瓶容器 - 使用bottle-demo的先进实现 -->
        <view class="bottle-container" :class="bottleTheme">
          <view class="bottle-content">
            <view class="svg-bottle-wrapper" :class="bottleScale" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
              <svg class="bottle-svg" viewBox="-76 0 292 292" xmlns="http://www.w3.org/2000/svg">
                <defs>
                  <linearGradient :id="'bottleGradient-' + bottleTheme" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="0%" :stop-color="getThemeColor('bottleTop')" />
                    <stop offset="100%" :stop-color="getThemeColor('bottleBottom')" />
                  </linearGradient>
                  <linearGradient :id="'milkGradient-' + bottleTheme" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="0%" :stop-color="getThemeColor('milkTop')" />
                    <stop offset="100%" :stop-color="getThemeColor('milkBottom')" />
                  </linearGradient>
                  <radialGradient :id="'highlightGradient-' + bottleTheme" cx="50%" cy="20%" r="80%">
                    <stop offset="0%" stop-color="#fff" stop-opacity="0.7" />
                    <stop offset="100%" stop-color="#fff" stop-opacity="0" />
                  </radialGradient>
                  <clipPath id="bottleClip">
                    <path d="M16.257,281.456a28.754,28.754,0,0,1-12.648-17.82c-1.788-7.126-1.109-17.568-.5-31.019.835-18.431,3.947-79.695,4.527-93.677A43.578,43.578,0,0,1,10.9,124.505a25.89,25.89,0,0,1,5.664-8.6l.032-.028a28.34,28.34,0,0,0,7.61,2.365,272.855,272.855,0,0,0,45.4,3.4,272.233,272.233,0,0,0,45.749-3.459,23.016,23.016,0,0,0,8.171-2.3.3.3,0,0,1,.032.024,25.89,25.89,0,0,1,5.664,8.6,43.554,43.554,0,0,1,3.265,14.435c.58,13.982,3.692,75.246,4.527,93.677.609,13.451,1.288,23.893-.5,31.019-2.606,10.391-9.1,16.89-19.125,21.292-13.28,3.817-28.787,4.779-47.783,4.779-18.249,0-34.711-.962-46.224-4.5A44.77,44.77,0,0,1,16.257,281.456Z" />
                  </clipPath>
                </defs>
                <!-- 奶液层 -->
                <path :d="milkWavePath" :fill="'url(#milkGradient-' + bottleTheme + ') '" clip-path="url(#bottleClip)" :style="animOn ? 'transition: d 0.5s cubic-bezier(.4,1.6,.4,1);' : ''" />
                <!-- 奶液波浪高光 -->
                <path :d="milkWaveHighlightPath" :fill="'url(#highlightGradient-' + bottleTheme + ') '" clip-path="url(#bottleClip)" :style="'pointer-events:none;'" />
                <!-- 奶瓶轮廓 -->
                <path class="a" d="M45.074,46.263a103.671,103.671,0,0,0-9.862,5.923c-8.244,5.894-14.28,14.585-9.875,27.821A274.584,274.584,0,0,0,69.6,83.226a275.573,275.573,0,0,0,44.268-3.212c4.4-13.241-1.632-21.933-9.877-27.828C95.482,46.1,84.69,42.911,83.987,36.72L83.946,18c-.008-3.7-.914-8.174-3.262-11.034C78.587,4.417,74.1,2.359,69.6,2.359S60.617,4.417,58.52,6.97C56.172,9.83,55.266,14.3,55.258,18L55.217,36.720C54.777,40.6,50.385,43.294,45.074,46.263Z" fill="none" :stroke="getThemeColor('bottleStroke')" stroke-width="4" />
                <path class="a" d="M16.257,281.456a28.754,28.754,0,0,1-12.648-17.82c-1.788-7.126-1.109-17.568-.5-31.019.835-18.431,3.947-79.695,4.527-93.677A43.578,43.578,0,0,1,10.9,124.505a25.89,25.89,0,0,1,5.664-8.6l.032-.028a28.34,28.34,0,0,0,7.61,2.365,272.855,272.855,0,0,0,45.4,3.4,272.233,272.233,0,0,0,45.749-3.459,23.016,23.016,0,0,0,8.171-2.3.3.3,0,0,1,.032.024,25.89,25.89,0,0,1,5.664,8.6,43.554,43.554,0,0,1,3.265,14.435c.58,13.982,3.692,75.246,4.527,93.677.609,13.451,1.288,23.893-.5,31.019-2.606,10.391-9.1,16.89-19.125,21.292-13.28,3.817-28.787,4.779-47.783,4.779-18.249,0-34.711-.962-46.224-4.5A44.77,44.77,0,0,1,16.257,281.456Z" fill="none" :stroke="getThemeColor('bottleStroke')" stroke-width="4" />
                <path class="c" d="M116.056,79.793q-.384-.021-.77-.015A272.409,272.409,0,0,1,69.6,83.226,270.53,270.53,0,0,1,24.07,79.785a11.85,11.85,0,0,0-8.707,4.6c-2.536,3.371-3.292,7.722-3.835,11.9a69.32,69.32,0,0,0-.829,10.972c-.053,2.419,2.538,6.516,4.089,7.556,2.709,1.817,5.437,2.631,9.418,3.429a272.868,272.868,0,0,0,45.4,3.4,272.233,272.233,0,0,0,45.749-3.459,21.633,21.633,0,0,0,9.981-3.371c1.55-1.04,4.141-5.137,4.088-7.556a69.32,69.32,0,0,0-.829-10.972c-.543-4.182-1.3-8.533-3.835-11.9A11.817,11.817,0,0,0,116.056,79.793Z" fill="none" :stroke="getThemeColor('bottleStroke')" stroke-width="2.5" />
                <!-- 刻度线 -->
                <g>
                  <line v-for="mark in scaleMarks" :key="mark" :x1="115" :y1="getScaleY(mark)" :x2="125" :y2="getScaleY(mark)" :stroke="getThemeColor('scale')" stroke-width="2" opacity="0.8" />
                  <text v-for="mark in scaleMarks" :key="'text-' + mark" :x="130" :y="getScaleY(mark) + 4" :fill="getThemeColor('scale')" font-size="11" font-family="Arial" opacity="0.9">{{ mark }}</text>
                </g>
                <!-- 投影 -->
                <ellipse cx="70" cy="290" rx="60" ry="10" :fill="getThemeColor('shadow')" opacity="0.18" />
              </svg>
            </view>
          </view>
        </view>
      </view>

      <!-- 底部表单控制面板 -->
      <view class="bottom-controls">
        <!-- 喂养类型选择 -->
        <view class="form-section">
          <text class="form-label">喂养方式</text>
          <view class="feeding-type-tabs">
            <view v-for="(tab, index) in feedingTabs" :key="index" class="feeding-tab" :class="{ 'active': currentFeedingType === index }" @click="currentFeedingType = index">
              <text class="tab-text">{{ tab.name }}</text>
              <view v-if="currentFeedingType === index" class="tab-active-indicator"></view>
            </view>
          </view>
        </view>

        <!-- 时间选择 -->
        <view class="form-section">
          <text class="form-label">喂养时间</text>
          <picker mode="time" :value="feedingTime" @change="onTimeChange">
            <view class="time-picker">
              <text class="time-text">{{ feedingTime }}</text>
              <text class="time-arrow">▼</text>
            </view>
          </picker>
        </view>

        <!-- 底部保存按钮 -->
        <view class="form-section bottom-actions-section">
          <button class="save-button" @click="saveRecord">保存记录</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 奶瓶选择器相关数据
      selectedAmount: 120, // 当前选择的奶量
      maxAmount: 240,
      minAmount: 10,
      touchStartY: 0,
      touchStartAmount: 120,
      bottleTheme: 'dark',
      bottleScale: 'normal', // 奶瓶缩放标记，small-screen或normal
      animOn: true,
      amountBounce: false,
      waveIntensity: 0,
      milkWavePath: '',
      milkWaveHighlightPath: '',
      currentFeedingType: 0, // 默认喝母乳
      feedingTabs: [
        { name: '喝母乳', type: 'bottle_breast' },
        { name: '喝奶粉', type: 'bottle_formula' }
      ],
      themeColors: {
        dark: {
          bottleTop: '#444',
          bottleBottom: '#222',
          bottleStroke: '#fff',
          milkTop: '#fff',
          milkBottom: '#bbb',
          scale: '#fff',
          shadow: '#000'
        }
      },
      scaleMarks: [50, 100, 150, 200, 250],
      feedingTime: '08:00',
      selectedDate: '', // 新增：用于保存传入的日期

      // 波浪动画相关变量
      isSliding: false,
      slideEndTimer: null,
      waveDecayTimer: null,
      waveTimer: null,

      // 背景泡泡效果
      bubbles: [
        { x: 10, y: 20, size: 20, duration: 10, delay: 0, opacity: 0.5 },
        { x: 30, y: 50, size: 15, duration: 8, delay: 1, opacity: 0.6 },
        { x: 50, y: 80, size: 25, duration: 12, delay: 2, opacity: 0.7 },
        { x: 70, y: 10, size: 18, duration: 7, delay: 3, opacity: 0.4 },
        { x: 90, y: 40, size: 22, duration: 11, delay: 4, opacity: 0.5 },
        { x: 20, y: 60, size: 18, duration: 9, delay: 5, opacity: 0.6 },
        { x: 40, y: 30, size: 16, duration: 7, delay: 6, opacity: 0.5 },
        { x: 60, y: 20, size: 20, duration: 10, delay: 7, opacity: 0.4 },
        { x: 80, y: 50, size: 15, duration: 8, delay: 8, opacity: 0.6 },
        { x: 15, y: 35, size: 22, duration: 11, delay: 9, opacity: 0.5 },
        { x: 35, y: 75, size: 17, duration: 9, delay: 10, opacity: 0.7 },
        { x: 55, y: 25, size: 19, duration: 10, delay: 11, opacity: 0.4 },
        { x: 75, y: 85, size: 21, duration: 12, delay: 12, opacity: 0.6 },
        { x: 95, y: 15, size: 14, duration: 7, delay: 13, opacity: 0.5 },
        { x: 25, y: 45, size: 23, duration: 11, delay: 14, opacity: 0.6 },
        // 添加更多气泡，让整个页面覆盖更全面
        { x: 5, y: 65, size: 18, duration: 9, delay: 15, opacity: 0.4 },
        { x: 85, y: 5, size: 22, duration: 12, delay: 16, opacity: 0.5 },
        { x: 45, y: 95, size: 16, duration: 8, delay: 17, opacity: 0.6 },
        { x: 65, y: 55, size: 20, duration: 10, delay: 18, opacity: 0.5 },
        { x: 12, y: 88, size: 19, duration: 11, delay: 19, opacity: 0.4 },
        { x: 93, y: 72, size: 24, duration: 13, delay: 20, opacity: 0.6 },
        { x: 33, y: 18, size: 17, duration: 7, delay: 21, opacity: 0.5 },
        { x: 78, y: 28, size: 21, duration: 9, delay: 22, opacity: 0.7 },
        { x: 22, y: 90, size: 15, duration: 8, delay: 23, opacity: 0.5 },
        { x: 88, y: 82, size: 23, duration: 12, delay: 24, opacity: 0.6 }
      ],
      commonAmounts: [100, 120, 150, 180, 200, 240] // 常用奶量列表
    }
  },

  created() {
    // 输出调试信息，确认themeColors和bottleTheme正确初始化
    console.log('组件创建 - 主题:', this.bottleTheme)
    console.log('组件创建 - 主题颜色对象:', this.themeColors)
    console.log('组件创建 - 当前主题颜色:', this.themeColors[this.bottleTheme])

    // 确保波浪路径初始化
    this.updateMilkWavePath()
  },

  onLoad(options) {
    // 监听屏幕旋转事件
    window.addEventListener('resize', this.handleScreenOrientationChange)
    // 初始化时间
    this.updateFeedingTime()

    // 先初始化主题和数据
    console.log('onLoad - 初始化主题')

    // 获取系统信息，调整布局
    this.handleScreenOrientationChange()

    if (options && options.date) {
      this.selectedDate = options.date
    } else {
      this.selectedDate = this.getCurrentDate()
    }

    setTimeout(() => {
      // 延迟初始化确保DOM已经渲染
      this.updateMilkWavePath()
      this.startWaveAnimation()
      console.log('onLoad - 波浪动画已初始化')
    }, 50)

    // 设置导航栏
    uni.setNavigationBarTitle({
      title: '添加喝奶记录'
    })
  },

  onUnload() {
    // 清理波浪动画定时器
    this.clearAllTimers()
    // 移除屏幕旋转监听
    window.removeEventListener('resize', this.handleScreenOrientationChange)
  },

  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },

    // 安全获取主题颜色
    getThemeColor(property) {
      // 默认颜色（深色主题）
      const defaultColors = {
        bottleTop: '#444',
        bottleBottom: '#222',
        bottleStroke: '#fff',
        milkTop: '#fff',
        milkBottom: '#bbb',
        scale: '#fff',
        shadow: '#000'
      }

      // 如果主题存在且属性存在，则返回对应颜色
      if (
        this.themeColors &&
        this.bottleTheme &&
        this.themeColors[this.bottleTheme] &&
        this.themeColors[this.bottleTheme][property]
      ) {
        return this.themeColors[this.bottleTheme][property]
      }

      // 否则返回默认颜色
      return defaultColors[property] || '#fff'
    },

    // 获取当前时间并格式化为HH:MM
    updateFeedingTime() {
      const now = new Date()
      const hours = now.getHours().toString().padStart(2, '0')
      const minutes = now.getMinutes().toString().padStart(2, '0')
      this.feedingTime = `${hours}:${minutes}`
    },

    // 时间选择器变更
    onTimeChange(e) {
      this.feedingTime = e.detail.value
      console.log('设置的时间:', this.feedingTime)
    },

    // 更新奶液波浪路径
    updateMilkWavePath() {
      try {
        const bottleHeight = 292
        const fillPercent = this.selectedAmount / this.maxAmount
        const fillHeight = Math.max(10, Math.min(220, fillPercent * 220))
        const waveY = 292 - fillHeight

        // 当波纹强度很低时，混合轻微波动和衰减波纹
        if (this.waveIntensity <= 0.1) {
          // 计算轻微波动
          const gentleAmp = 0.8 // 非常轻微的波浪幅度
          const gentleFreq = 1.5 // 较低的频率
          const step = 20 // 较大的步长，让波浪更平滑
          let d = `M-76,${waveY}`
          for (let x = -76; x <= 216; x += step) {
            const time = Date.now() / 8000 // 非常慢的滚动速度
            const gentleWaveY =
              waveY +
              Math.sin((x / 60 + time) * Math.PI * gentleFreq) * gentleAmp

            // 如果还有衰减波纹，则混合两种效果
            let finalWaveY = gentleWaveY
            if (this.waveIntensity > 0.01) {
              const decayTime = Date.now() / 2000
              const decayWaveY =
                waveY +
                Math.sin((x / 20 + decayTime) * Math.PI * 3) *
                  (3 * this.waveIntensity)
              // 平滑混合：衰减波纹逐渐减弱，轻微波动逐渐增强
              const mixRatio = this.waveIntensity / 0.1 // 0.01-0.1 映射到 0.1-1
              finalWaveY = gentleWaveY * (1 - mixRatio) + decayWaveY * mixRatio
            }

            d += ` Q${x + step / 2},${finalWaveY - gentleAmp / 3} ${
              x + step
            },${finalWaveY}`
          }
          d += ` V292 H-76 Z`
          this.milkWavePath = d
        } else {
          // 根据波纹强度调整波纹参数
          const baseAmp = 3 // 基础波纹幅度
          const amp = baseAmp * this.waveIntensity, // 根据强度调整幅度
            freq = 3, // 增加波纹频率
            step = 12 // 减小步长，让波纹更平滑
          let d = `M-76,${waveY}`
          for (let x = -76; x <= 216; x += step) {
            const time = Date.now() / 2000 // 加快滚动速度
            const waveY2 =
              waveY + Math.sin((x / 20 + time) * Math.PI * freq) * amp
            d += ` Q${x + step / 2},${waveY2 - amp / 2} ${x + step},${waveY2}`
          }
          d += ` V292 H-76 Z`
          this.milkWavePath = d
        }

        // 高光波浪
        const y = waveY - 2

        // 当波纹强度很低时，混合轻微波动和衰减波纹
        if (this.waveIntensity <= 0.1) {
          // 计算轻微高光波动
          const gentleAmp = 0.5 // 更轻微的高光波浪幅度
          const gentleFreq = 1.2 // 稍微不同的频率
          const step = 20 // 较大的步长，让波浪更平滑
          let d = `M-76,${y}`
          for (let x = -76; x <= 216; x += step) {
            const time = Date.now() / 9000 // 稍微不同的速度
            const gentleWaveY =
              y +
              Math.sin((x / 70 + time + 0.3) * Math.PI * gentleFreq) * gentleAmp

            // 如果还有衰减波纹，则混合两种效果
            let finalWaveY = gentleWaveY
            if (this.waveIntensity > 0.01) {
              const decayTime = Date.now() / 2500
              const decayWaveY =
                y +
                Math.sin((x / 25 + decayTime + 0.5) * Math.PI * 2.5) *
                  (2 * this.waveIntensity)
              // 平滑混合：衰减波纹逐渐减弱，轻微波动逐渐增强
              const mixRatio = this.waveIntensity / 0.1 // 0.01-0.1 映射到 0.1-1
              finalWaveY = gentleWaveY * (1 - mixRatio) + decayWaveY * mixRatio
            }

            d += ` Q${x + step / 2},${finalWaveY - gentleAmp / 3} ${
              x + step
            },${finalWaveY}`
          }
          d += ` V${y + 15} H-76 Z`
          this.milkWaveHighlightPath = d
        } else {
          // 根据波纹强度调整高光波纹参数
          const baseAmp = 2 // 基础高光波纹幅度
          const amp = baseAmp * this.waveIntensity,
            freq = 2.5,
            step = 12
          let d = `M-76,${y}`
          for (let x = -76; x <= 216; x += step) {
            const time = Date.now() / 2500 // 稍微不同的速度
            const waveY2 =
              y + Math.sin((x / 25 + time + 0.5) * Math.PI * freq) * amp
            d += ` Q${x + step / 2},${waveY2 - amp / 2} ${x + step},${waveY2}`
          }
          d += ` V${y + 15} H-76 Z`
          this.milkWaveHighlightPath = d
        }
      } catch (error) {
        console.error('更新波浪路径时发生错误:', error)

        // 设置默认的波浪路径，防止页面崩溃
        this.milkWavePath = 'M-76,200 L216,200 V292 H-76 Z'
        this.milkWaveHighlightPath = 'M-76,198 L216,198 V215 H-76 Z'
      }
    },

    // 开始波浪动画
    startWaveAnimation() {
      this.clearTimer(this.waveTimer)
      this.waveTimer = setInterval(() => {
        this.updateMilkWavePath()
      }, 30) // 降低到约30fps，减少性能消耗
    },

    // 清理所有定时器
    clearAllTimers() {
      this.clearTimer(this.waveTimer)
      this.clearTimer(this.slideEndTimer)
      this.clearTimer(this.waveDecayTimer)
    },

    // 清理单个定时器
    clearTimer(timer) {
      if (timer) {
        clearInterval(timer)
      }
    },

    // 计算刻度线位置
    getScaleY(mark) {
      const percent =
        (mark - this.minAmount) / (this.maxAmount - this.minAmount)
      const bottleBodyStart = 150
      const bottleBodyEnd = 270
      const bottleBodyHeight = bottleBodyEnd - bottleBodyStart
      return bottleBodyEnd - percent * bottleBodyHeight
    },

    // 触摸开始事件
    onTouchStart(e) {
      this.touchStartY = e.touches[0].clientY
      this.touchStartAmount = this.selectedAmount

      // 开始滑动，启用波纹动画
      this.isSliding = true
      this.waveIntensity = 1 // 立即设置为最大波纹强度

      // 清理之前的定时器
      this.clearTimer(this.slideEndTimer)
      this.clearTimer(this.waveDecayTimer)
    },

    // 触摸移动事件
    onTouchMove(e) {
      e.preventDefault() // 阻止默认行为，提高滑动流畅度
      const deltaY = this.touchStartY - e.touches[0].clientY
      const deltaAmount = Math.round(deltaY * 0.8) // 提高灵敏度

      // 计算新的奶量并限制范围
      let newAmount = this.touchStartAmount + deltaAmount
      newAmount = Math.max(this.minAmount, Math.min(this.maxAmount, newAmount))

      // 对齐到5的倍数
      newAmount = Math.round(newAmount / 5) * 5

      // 检查是否发生变化
      if (newAmount !== this.selectedAmount) {
        this.selectedAmount = newAmount

        // 触发波纹效果，但减少弹跳频率以提高性能
        if (this.waveIntensity < 0.4) {
          this.waveIntensity = Math.min(this.waveIntensity + 0.2, 0.6)
        }
      }
    },

    // 触摸结束事件
    onTouchEnd() {
      // 滑动结束后，开始波纹衰减动画
      this.isSliding = false
      this.startWaveDecay()

      // 添加弹跳效果
      this.amountBounce = true
      setTimeout(() => {
        this.amountBounce = false
      }, 300)

      // 移除振动反馈，避免在浏览器中产生错误
      // 仅在真机环境中使用振动
      if (uni.getSystemInfoSync().platform !== 'web') {
        try {
          uni.vibrateShort({
            success: function () {
              console.log('振动成功')
            }
          })
        } catch (e) {
          console.log('振动API不可用')
        }
      }
    },

    // 开始波浪衰减
    startWaveDecay() {
      // 清理之前的衰减定时器
      this.clearTimer(this.waveDecayTimer)

      // 开始波纹衰减动画
      this.waveDecayTimer = setInterval(() => {
        if (this.waveIntensity > 0) {
          this.waveIntensity -= 0.015 // 加快衰减速度，提高性能
          if (this.waveIntensity < 0) {
            this.waveIntensity = 0
          }
        } else {
          // 波纹完全消失，清理定时器
          this.clearTimer(this.waveDecayTimer)
          this.waveDecayTimer = null
        }
      }, 30) // 降低到约30fps，减少性能消耗
    },

    // 获取当前日期格式化为YYYY-MM-DD
    getCurrentDate() {
      const now = new Date()
      const year = now.getFullYear()
      const month = (now.getMonth() + 1).toString().padStart(2, '0')
      const day = now.getDate().toString().padStart(2, '0')
      return `${year}-${month}-${day}`
    },

    // 检测屏幕方向变化并调整布局
    handleScreenOrientationChange() {
      uni.getSystemInfo({
        success: (res) => {
          const { windowWidth, windowHeight } = res
          const isPortrait = windowHeight > windowWidth

          if (isPortrait) {
            this.bottleScale = 'small-screen'
          } else {
            this.bottleScale = 'normal'
          }
        }
      })
    },

    // 保存记录到云数据库
    async saveRecord() {
      if (!this.selectedAmount || this.selectedAmount < this.minAmount) {
        uni.showToast({
          title: '请选择喝奶量',
          icon: 'none'
        })
        return
      }

      try {
        uni.showLoading({
          title: '保存中...'
        })

        // 调用云函数保存记录，使用selectedDate
        const result = await uniCloud.callFunction({
          name: 'milk-record-service',
          data: {
            action: 'add',
            data: {
              date: this.selectedDate, // 用传入的日期
              amount: this.selectedAmount,
              time: this.feedingTime,
              notes: '', // 不再使用备注信息
              feeding_type: this.feedingTabs[this.currentFeedingType].type,
              source: 'bottle_selector_page'
            }
          }
        })

        uni.hideLoading()

        if (result.result.success) {
          uni.showToast({
            title: '记录保存成功',
            icon: 'success'
          })

          // 触发刷新事件
          uni.$emit('refreshRecords')

          // 延迟返回上一页
          setTimeout(() => {
            this.goBack()
          }, 1500)
        } else {
          throw new Error(result.result.message || '保存失败')
        }
      } catch (error) {
        uni.hideLoading()
        console.error('保存记录失败:', error)
        uni.showToast({
          title: '保存失败，请重试',
          icon: 'none'
        })
      }
    },

    // 设置常用奶量
    setQuickAmount(amount) {
      // 更新选中的奶量
      this.selectedAmount = amount

      // 添加波浪动画效果
      this.waveIntensity = 0.8
      this.startWaveDecay()

      // 添加弹跳效果
      this.amountBounce = true
      setTimeout(() => {
        this.amountBounce = false
      }, 300)

      // 仅在真机环境中使用振动
      if (uni.getSystemInfoSync().platform !== 'web') {
        try {
          uni.vibrateShort()
        } catch (e) {
          console.log('振动API不可用')
        }
      }
    }
  }
}
</script>

<style scoped>
/* 修改整体背景为深色 */
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #1c1d30; /* 深蓝黑色背景 */
}

/* 主内容容器 */
.content-wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
  z-index: 10;
  overflow: hidden;
}

/* 顶部导航样式 - 自适应高度 */
.top-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 40rpx;
  width: 100%;
  position: relative;
  flex-shrink: 0; /* 防止压缩 */
}

/* 主内容区域调整 */
.main-content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 确保垂直居中 */
  align-items: center;
  overflow: hidden;
  padding: 0;
  position: relative;
  margin: 0 0 300rpx; /* 移除顶部40rpx的margin */
  pointer-events: auto; /* 确保事件可以正常传递 */
}

/* 奶瓶容器 - 自动占据全部可用空间 */
.bottle-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  padding: 0 20rpx; /* 添加水平内边距 */
}

/* 奶瓶内容 - 适应容器大小 */
.bottle-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  position: relative;
  transform: scale(1.8); /* 添加缩放，使奶瓶更大 */
}

/* 奶瓶SVG包装器 - 自适应大小 */
.svg-bottle-wrapper {
  height: auto;
  width: 80%; /* 控制宽度 */
  max-height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bottle-svg {
  width: 100%;
  height: auto;
  max-height: 100%;
}

/* 背景效果样式 - 重写气泡动画 */
.background-effects {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #1c1d30; /* 与container相同的背景色 */
  z-index: -1;
}

.bubble {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  will-change: transform;
}

.bubble-0 {
  animation: float-up-1 15s infinite linear;
}

.bubble-1 {
  animation: float-up-2 12s infinite linear;
}

.bubble-2 {
  animation: float-up-3 10s infinite linear;
}

@keyframes float-up-1 {
  0% {
    transform: translateY(120%) translateX(-10px) scale(0.8);
    opacity: 0;
  }
  10% {
    opacity: 0.5;
  }
  90% {
    opacity: 0.5;
    transform: translateY(-80%) translateX(10px) scale(1.1);
  }
  100% {
    transform: translateY(-120%) translateX(0) scale(1.2);
    opacity: 0;
  }
}

@keyframes float-up-2 {
  0% {
    transform: translateY(120%) translateX(10px) scale(0.8);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.6;
    transform: translateY(-80%) translateX(-10px) scale(1.1);
  }
  100% {
    transform: translateY(-120%) translateX(0) scale(1.2);
    opacity: 0;
  }
}

@keyframes float-up-3 {
  0% {
    transform: translateY(120%) translateX(0) scale(0.8);
    opacity: 0;
  }
  10% {
    opacity: 0.4;
  }
  90% {
    opacity: 0.4;
    transform: translateY(-80%) translateX(0) scale(1.1);
  }
  100% {
    transform: translateY(-120%) translateX(0) scale(1.2);
    opacity: 0;
  }
}

/* 左侧返回按钮 */
.floating-close-btn {
  width: 70rpx;
  height: 70rpx;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-icon {
  font-size: 36rpx;
  color: #fff;
}

/* 右侧占位 */
.placeholder {
  width: 70rpx;
  height: 70rpx;
}

/* 中央奶量显示 */
.milk-amount-header {
  display: flex;
  align-items: baseline; /* 使用baseline对齐，更精确地对齐文本底部 */
  justify-content: center;
  position: relative; /* 添加相对定位 */
}

.milk-amount-main {
  font-size: 60rpx;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
  line-height: 1;
  margin-bottom: 0;
}

.milk-amount-unit {
  font-size: 30rpx;
  color: #fff;
  margin-left: 5rpx;
  opacity: 0.8;
  line-height: 1;
  margin-bottom: 2rpx; /* 微调底部位置 */
}

/* 奶量数字显示 */
.milk-amount-below {
  position: absolute;
  bottom: -90rpx;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.6); /* 更深的背景 */
  border-radius: 40rpx;
  padding: 12rpx 36rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.milk-amount-main {
  font-size: 90rpx; /* 适中字体 */
  font-weight: bold;
  color: #fff;
  text-shadow: 0 2px 10px rgba(255, 255, 255, 0.5);
  line-height: 1;
}

.milk-amount-unit {
  font-size: 45rpx; /* 适中字体 */
  margin-bottom: 10rpx;
  margin-left: 10rpx;
  color: #fff;
  text-shadow: 0 1px 5px rgba(255, 255, 255, 0.5);
  line-height: 1;
}

/* 新增侧面奶量显示样式 */
.milk-amount-side {
  position: absolute;
  right: -80rpx;
  top: 100rpx;
  background-color: rgba(255, 107, 157, 0.9);
  border-radius: 50rpx;
  padding: 15rpx 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.3);
  z-index: 30;
}

.milk-amount-main {
  font-size: 46rpx;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.milk-amount-unit {
  font-size: 26rpx;
  color: #fff;
  margin-left: 5rpx;
  opacity: 0.9;
}

/* 弹跳动画效果 */
.bounce {
  animation: bounceEffect 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes bounceEffect {
  0% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.2);
  }
  100% {
    transform: translateX(-50%) scale(1);
  }
}

/* 表单区域样式 */
.feeding-form {
  padding: 30rpx;
  margin-top: 40rpx; /* 进一步减少顶部间距 */
  background-color: rgba(32, 32, 48, 0.95); /* 进一步增加不透明度 */
  border-radius: 30rpx 30rpx 0 0;
  box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 20; /* 提高z-index */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0; /* 确保表单不会被压缩 */
  min-height: 40vh; /* 确保表单有足够的高度 */
}

/* 修改表单内控件样式 */
.form-section {
  margin-bottom: 30rpx;
}

.form-label {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.9); /* 浅色文字 */
  margin-bottom: 16rpx;
  display: block;
}

/* 修改喂养类型选项卡回左右布局，保持深色主题 */
.feeding-type-tabs {
  display: flex;
  background-color: #1e1f34;
  border-radius: 50rpx;
  padding: 4rpx;
  margin-bottom: 20rpx;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.feeding-tab {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  border-radius: 50rpx;
  position: relative;
  transition: all 0.3s ease;
}

.feeding-tab.active {
  background: linear-gradient(135deg, #ff6b9d, #ff8a9b);
  box-shadow: 0 2px 8px rgba(255, 107, 157, 0.4);
}

.tab-text {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.6);
  transition: all 0.2s ease;
}

.feeding-tab.active .tab-text {
  color: #fff;
  font-weight: bold;
}

.tab-active-indicator {
  display: none; /* 隐藏指示器，使用背景色来表示选中状态 */
}

/* 时间选择器样式 */
.time-picker {
  background-color: #1e1f34;
  padding: 20rpx 30rpx;
  border-radius: 12rpx;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative; /* 添加相对定位 */
  z-index: 60; /* 确保选择器在最上层 */
}

/* 时间文本样式 */
.time-text {
  font-size: 30rpx;
  color: rgba(255, 255, 255, 0.8); /* 浅色文字 */
}

/* 时间箭头样式 */
.time-arrow {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.5); /* 半透明箭头颜色 */
}

/* 确保picker可以接收交互 */
picker {
  width: 100%;
  position: relative;
  z-index: 61; /* 比时间选择器更高的层级 */
}

/* 修改主内容区域，确保不阻止事件传递 */
.main-content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
  position: relative;
  margin: 0 0 300rpx;
  pointer-events: auto; /* 确保事件可以正常传递 */
}

/* 确保整个容器不阻止事件传递 */
.content-wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
  z-index: 10;
  overflow: hidden; /* 仅在容器级别保留overflow:hidden */
}

/* 备注输入框 */
.notes-input {
  width: 100%;
  height: 150rpx;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 15rpx;
  padding: 20rpx;
  font-size: 28rpx;
  color: #fff;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 侧边控制面板 */
.side-controls {
  width: 100%;
  padding: 20rpx;
  background-color: rgba(32, 32, 48, 0.8);
  border-radius: 30rpx;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: auto;
}

/* 底部控制面板 - 自适应高度 */
.bottom-controls {
  width: 100%;
  background-color: #262742;
  border-radius: 30rpx 30rpx 0 0;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.3);
  padding: 30rpx;
  padding-top: 40rpx;
  padding-bottom: calc(40rpx + env(safe-area-inset-bottom, 0));
  position: absolute; /* 使用absolute而不是fixed定位 */
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
}

/* 确保主内容区域不被底部表单遮挡 */
.main-content-area {
  padding-bottom: 320rpx; /* 根据底部表单高度调整 */
}

/* 底部保存按钮 - 表单内保存按钮 */
.bottom-actions-section {
  margin-top: 40rpx;
  margin-bottom: 20rpx; /* 减少底部间距 */
  position: relative;
  z-index: 30; /* 提高z-index确保不被其他元素遮挡 */
  margin-top: auto; /* 将按钮推到底部 */
}

.save-button {
  width: 100%;
  height: 90rpx;
  background: linear-gradient(135deg, #ff6b9d, #ff8a9b);
  color: white;
  border: none;
  border-radius: 45rpx;
  font-size: 32rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30rpx;
  box-shadow: 0 5px 15px rgba(255, 107, 157, 0.4);
  letter-spacing: 2px;
  transition: all 0.3s ease;
  position: relative;
  z-index: 35; /* 提高z-index确保可见 */
}

.save-button:active {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(255, 107, 157, 0.4);
}

/* 主题特定样式 */
.dark .milk-amount-main,
.dark .milk-amount-unit {
  color: #fff;
  text-shadow: 0 2px 10px rgba(255, 255, 255, 0.5);
}

.dark .milk-amount-below {
  background-color: rgba(0, 0, 0, 0.3);
}

.dark .tab-active-indicator,
.dark .time-arrow {
  color: #fff;
  text-shadow: 0 2px 10px rgba(255, 255, 255, 0.5);
}

.dark .save-button {
  background: linear-gradient(135deg, #444, #222);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

/* 小屏幕设备优化 */
.small-screen {
  transform: scale(0.75) !important;
  height: 250px !important;
  margin-top: 0;
}

.small-screen .milk-amount-below {
  bottom: -60rpx;
}

.small-screen .milk-amount-main {
  font-size: 80rpx;
}

.small-screen .milk-amount-unit {
  font-size: 40rpx;
}

/* 添加过渡动画 */
.container * {
  transition: all 0.2s ease; /* 降低全局过渡动画时间以提高响应速度 */
}

/* 新的奶量显示样式 - 放在页面顶部明显位置 */
.milk-amount-display {
  width: 100%;
  padding: 30rpx 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 107, 157, 0.9);
  margin-bottom: 20rpx;
  position: relative;
  z-index: 40;
  border-bottom: 2rpx solid rgba(255, 255, 255, 0.2);
}

.milk-amount-main {
  font-size: 80rpx;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.milk-amount-unit {
  font-size: 40rpx;
  color: #fff;
  margin-left: 10rpx;
  opacity: 0.9;
}

/* 移除奶量滑块容器样式 */
.time-picker {
  width: 100%;
  height: 80rpx;
  background: #2d2b39;
  border-radius: 16rpx;
  border: 1rpx solid rgba(255,255,255,0.15);
  color: #fff;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
}

.time-arrow {
  color: rgba(255, 255, 255, 0.5);
  font-size: 24rpx;
}

/* 平板适配样式 */
@media (min-width: 768px) {

  
  /* 平板按钮适配 */
  .save-button {
    height: 100rpx !important;
    font-size: 36rpx !important;
  }
  
  /* 平板喂养类型标签适配 */
  .feeding-tab {
    padding: 15rpx 30rpx !important;
    font-size: 32rpx !important;
  }
  
  /* 平板时间选择器适配 */
  .time-picker {
    height: 100rpx !important;
    font-size: 36rpx !important;
  }
  
  /* 平板表单标签适配 */
  .form-label {
    font-size: 34rpx !important;
    margin-bottom: 20rpx !important;
  }
  
  /* 平板奶量显示适配 */
  .milk-amount-main {
    font-size: 100rpx !important;
  }
  
  .milk-amount-unit {
    font-size: 50rpx !important;
  }
  
  /* 平板底部控制面板适配 */
  .bottom-controls {
    padding: 40rpx !important;
  }
}

/* 大屏平板适配 */
@media (min-width: 1024px) {
  
  .save-button {
    height: 110rpx !important;
    font-size: 38rpx !important;
  }
  
  .time-picker {
    height: 110rpx !important;
    font-size: 38rpx !important;
  }
  
  .feeding-tab {
    padding: 20rpx 40rpx !important;
    font-size: 36rpx !important;
  }
  
  .form-label {
    font-size: 36rpx !important;
  }
  
  .milk-amount-main {
    font-size: 120rpx !important;
  }
  
  .milk-amount-unit {
    font-size: 60rpx !important;
  }
}





/* 平板强制覆盖 */
@media (min-width: 768px) {
  :deep(.nut-picker__title) {
    font-size: 28px !important;
  }
  
  :deep(.nut-picker__left),
  :deep(.nut-picker__right) {
    font-size: 24px !important;
  }
  
  :deep(.nut-picker-item) {
    font-size: 24px !important;
  }
  
  :deep(.nut-picker__columnitem .nut-picker-item) {
    font-size: 26px !important;
  }
  
  :deep(.nut-picker__columnitem .nut-picker-item--active) {
    font-size: 32px !important;
  }
}

/* 大屏平板强制覆盖 */
@media (min-width: 1024px) {
  :deep(.nut-picker__title) {
    font-size: 32px !important;
  }
  
  :deep(.nut-picker__left),
  :deep(.nut-picker__right) {
    font-size: 26px !important;
  }
  
  :deep(.nut-picker-item) {
    font-size: 26px !important;
  }
  
  :deep(.nut-picker__columnitem .nut-picker-item) {
    font-size: 30px !important;
  }
  
  :deep(.nut-picker__columnitem .nut-picker-item--active) {
    font-size: 36px !important;
  }
}
</style> 